<!DOCTYPE html>
<html>

<head>
    <% include global/meta.html %>
        <% include global/top-css.html %>
            <title>yuscms</title>
</head>

<body>

                        <main class="main" data-info="<%=admin.permission%>">
                            <div class="ys-admin-pos c-a1a3aa">
                                首页
                                <span class="f-sum">></span>
                                <span class="c-565b6d">友情链接</span>
                                <span class="f-sum">></span>
                                <span class="c-565b6d">更新</span>
                            </div>

                            <div class="ys-admin-tablist">
                                <div class="ys-admin-tab-header row justify-content-b">
                                    <p class="f-14 c-565b6d pl-8 pt-6"></p>
                                </div>

                                <div class="mr-10 ml-10" v-loading="loading">
                                    <form @submit.prevent="checkForm" name="form">
                                        <ul class="overflow-h pb-20">
                                            <li class="row pd-10 f-14">
                                                <div class="col-hd">
                                                    <label class="label">链接类型</label>
                                                </div>
                                                <div class="col-bd">
                                                    <input type="radio" name="type" class="radio pos-r t-4 mr-5" v-model="params.type" value="0" />
                                                    <span class="c-565b6d f-14 mr-15">文字</span>
                                                    <input type="radio" name="type" class="radio pos-r t-4 mr-5" v-model="params.type" value="1" />
                                                    <span class="c-565b6d f-14">logo</span>
                                                </div>
                                            </li>
                                            <li class="row pd-10 f-14">
                                                <div class="col-hd">
                                                    <label class="label">链接标题</label>
                                                </div>
                                                <div class="col-10">
                                                    <input type="text" name="title" class="input" v-model="params.title" />
                                                </div>
                                            </li>

                                            <li class="row pd-10 f-14">
                                                <div class="col-hd">
                                                    <label class="label">链接网址</label>
                                                </div>
                                                <div class="col-10">
                                                    <input type="text" name="url" class="input" v-model="params.url" />
                                                </div>
                                            </li>
                                            <li class="row pd-10 f-14">
                                                <div class="col-hd">
                                                    <label class="label">链接LOGO</label>
                                                </div>

                                                <div class="col-bd row c-666">
                                                    <img v-if="params.img" class="thumb" :src="params.img" alt="">
                                                    <span class="ico-camera">
                                                        <input @change="sendThumb" type="file" name="img" id="thumb">
                                                    </span>
                                                </div>
                                                <div class="col-ft col-16 c-999" id="thumb">
                                                    (缩略图必须是jpg,gif,png,并且200k之内)
                                                </div>

                                            </li>

                                            <li class="row pd-10 f-14">
                                                <div class="col-hd">
                                                    <label class="label">描　　述</label>
                                                </div>
                                                <div class="col-10">
                                                    <textarea name="info" v-model="params.info" placeholder="" class="textarea"></textarea>
                                                </div>
                                            </li>

                                            <li class="pd-10 mt-35">
                                                <div class="col-hd">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                                <div class="col-bd row ml-35">
                                                    <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                                                    <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
                                                </div>
                                            </li>

                                        </ul>
                                    </form>
                                </div>


                            </div>
                        </main>
             
    <% include global/all-js.html %>
        <script>
            var vm = new Vue({
                el: '.main',
                data: {
                    loading: true,
                    params: {
                        img: '',
                        title: '',
                        url: '',
                        info: '',
                        type: 0,
                        id: $m.getParams('id')
                    }
                },
                methods: {
                    queryById() {
                        let _this = this;
                        axios.get('/api/admin/link/queryById', {
                            params: { id: _this.params.id }
                        }).then((data) => {
                            let filterData = data.data;
                            if (filterData.success) {
                                _this.params = filterData.data[0];
                            }
                            _this.loading = false;
                        }).catch((error) => {
                            console.error(error)
                        })
                    },
                    sendThumb: function () {
                        var _this = this;

                        var formData = new FormData();
                        formData.append('file', $('#thumb')[0].files[0]);
                        var thumb = $('#thumb').val().split('.')[1];

                        if (thumb != 'jpg' && thumb != 'gif' && thumb != 'jpeg' && thumb != 'png') {
                            tipsWarn(_this, "请上传图片！");
                            return false;
                        }

                        if (($('#thumb')[0].files[0].size / 1000) > 200) {
                            tipsWarn(_this, '缩略图不能超过200k');
                            return false;
                        }

                        let config = {
                            headers: { 'Content-Type': 'multipart/form-data' }
                        };

                        axios.post('/api/admin/slide/upload', formData, config)
                            .then(data => {
                                let filterData = data.data;
                                _this.params.img = filterData.data[0];
                            }).catch((error) => {
                                console.error(error)
                            })

                    },


                    linkUpdate() {
                        let _this = this;
                        axios.post('/api/admin/link/update', _this.params)
                            .then((data) => {
                                let filterData = data.data;
                                if (filterData.data.affectedRows === 1) {
                                    tips(_this, '更新成功！');
                                    _this.$router.go(-1);
                                }
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    },
                    checkForm: function () {
                        var _this = this;
                        if (!hasPermission('6')) {
                            tipsWarn(_this, '对不起,您没有操作权限^_^');
                            return
                        }
                        var fm = document.form;

                        var _this = this;

                        if (_this.params.url.length == '') {
                            tipsWarn(_this, '链接不得为空!^_^');
                            fm.url.focus();
                            return false;
                        }

                        if (_this.params.title.length > 20) {
                            tipsWarn(_this, '标题不得大于20位!^_^');
                            fm.title.focus();
                            return false;
                        }

                        if (_this.params.info.length > 200) {
                            tipsWarn(_this, '描述不能大于200位!^_^');
                            fm.title.focus();
                            return false;
                        }


                        _this.linkUpdate()

                    }

                },

                created: function () {
                    this.queryById()
                },
                mounted: function () {

                }
            });
        </script>
</body>

</html>